<template>
  <div class="panel">
    <div v-for="d in data" :key="d.flowId" class="content flex flex-justify">
      <div>
        <span :class="['first_node','def',d.state===1?'success':'',d.finish?'finish':'']" v-if="d.isShow===1">
          {{d.flowName}}
          <i class="c-ico"></i>
        </span>
        <p v-for="item in d.children" :key="item.flowId">
          <span :class="['second_node',item.state===1?'process_success':'']" v-if="d.isShow===1">
            {{item.flowName}}
          </span>
        </p>
      </div>
      <div class="proLine flex flex-justify flex-align-c" v-if="d.flowName!='复查'">
        <i :class="[d.finish?'finish':'']"></i>
        <i :class="[d.finish?'finish':'']"></i>
        <i :class="[d.finish?'finish':'']"></i>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      data: {
        type: Array
      }
    },
  }

</script>

<style scoped>
  .panel {
    display: flex;
    justify-content: space-around;
    height: inherit;
  }

  .process_default {
    color: #999;
  }

  .process_success {
    color: #73c373!important;
  }

  .first_node {
    color: #fff;
  }

  .content {
    flex: 1;
  }

  .panel .content:nth-last-child(1) {
    flex: 0.7 !important;
  }

  .panel .content:nth-child(1) {
    padding-left: 10%;
  }

  .content:nth-child(1) .def i {
    background-position: left center;
  }

  .content:nth-child(2) .def i {
    background-position: -48px center;
  }

  .content:nth-child(3) .def i {
    background-position: -96px center;
  }

  .content:nth-child(4) .def i {
    background-position: -144px center;
  }

  .def i {
    display: block;
    width: 48px;
    height: 48px;
    background-image: url("../assets/non-stop flight_sketch_default.png");
    box-sizing: border-box;
  }

  .success i {
    display: block;
    width: 48px;
    height: 48px;
    background-image: url("../assets/non-stop flight_sketch_selected.png");
    box-sizing: border-box;
  }

  .circle_success {
    border: 2px solid #73c373;
  }

  .circle_finish {
    background: #73c373;
  }

  .second_node {
    color: #999;
  }

  .proLine {
    padding: 0 40px;
    flex: 1;
  }

  .proLine i {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #999;
    border-radius: 10px;
  }
  .index_press .panel .content:nth-last-child(1){
    flex: 0.2 !important;
  }
  .proLine i.finish{
    background-color: #73c373
  }
</style>

